import { IOrderViewOption, ToolType } from "@manycore/custom-ksg-viewer-sdk";
import Button from 'antd/es/button';
import CheckBox from 'antd/es/checkbox';
import Input from 'antd/es/input';
import message from 'antd/es/message';
import { useRef, useState } from 'react';
import { AppStore, EViewType } from '../../../store';
import '../index.less';
import { EditableInput, IEditableInputRef } from '../../../components/EditableInput';


const DEFAULT_ORDER_ID = '20240112307185';
export function AuditOrderInput() {
    const { appState: { app }, updateViewInfo, updateJsonData } = AppStore.useContainer();
    const [orderId, setOrderId] = useState<string>(DEFAULT_ORDER_ID);
    const [loading, setLoading] = useState<boolean>(false);
    const [withFloorplan, setWithFloorplan] = useState<boolean>(false);
    const inputRef = useRef<IEditableInputRef>(null)

    /**
     * JSON数据获取
     */
    const getDesignModelsJson = async (viewOption: IOrderViewOption) => {
        updateJsonData(undefined);
        const { orderId } = viewOption;
        const data = (await Manycore.Custom.Design.Export.getAuditDesignJsonUrlAsync({ orderId })).data;
        if (data?.url) {
            const json = await fetch(data.url, { method: 'get' }).then(res => res.json());
            const { levelToolTypeResultList } = json;
            if (levelToolTypeResultList && Array.isArray(levelToolTypeResultList)) {
                updateJsonData(levelToolTypeResultList[0]?.productionData);
            }
        }
    }

    /**
     * 场景展示
     */
    const viewModels = async (viewOption: IOrderViewOption) => {
        try {
            setLoading(true);
            const { orderId, modelId } = viewOption;
            updateViewInfo({
                type: EViewType.AuditOrder,
                info: viewOption
            });
            await app!.sceneService.viewAsync({
                orderId: orderId,
                modelId: modelId,
                withFloorplan,
                toolType: [ToolType.Wardrobe, ToolType.DoorWindow, ToolType.Cabinet]
            });

        } catch (err) {
            console.error(err);
        } finally {
            setLoading(false);
        }
    }

    const onClick = () => {
        const modelIds = inputRef.current!.getValidValues();
        if (!orderId) {
            message.error('缺少审核订单id！请填入后重试');
            return;
        }
        const viewInfo = {
            orderId: orderId,
            modelId: modelIds.length === 0 ? undefined : modelIds
        }
        viewModels(viewInfo);
        getDesignModelsJson(viewInfo);
    }

    return <div className='left-panel-main'>
        <span className='bold-text'>审核订单ID</span>
        <Input value={orderId} onChange={(event) => setOrderId(event.target.value)} size='small'></Input>
        <span className='bold-text'>顶层模型ID（可选）</span>
        <EditableInput ref={inputRef} inputProps={{ placeholder: '请输入顶层模型id' }} addedBtnProps={{ name: '添加展示模型' }} />
        <div><CheckBox checked={withFloorplan} onChange={(e) => setWithFloorplan(e.target.checked)}>展示户型</CheckBox></div>
        <Button loading={loading} onClick={onClick} type="primary" size='small'>确认</Button>
    </div>
}
